<template>
  <div>
    <div class="app-container"></div>
    <el-input placeholder="请输入ID" v-model="input.id" clearable> </el-input>
    <el-input placeholder="请输入楼层" v-model="input.floor" clearable>
    </el-input>
    <el-input placeholder="请输入房间号" v-model="input.roomNum" clearable>
    </el-input>
    <el-input placeholder="请输入姓名" v-model="input.name" clearable>
    </el-input>
    <el-input placeholder="请输入性别" v-model="input.gender" clearable>
    </el-input>
    <el-input placeholder="请输入身份证号" v-model="input.idNumber" clearable>
    </el-input>
    <el-input placeholder="请输入电话" v-model="input.phone" clearable>
    </el-input>
    <el-input placeholder="请输入微信号" v-model="input.wechatId" clearable>
    </el-input>
    <el-input placeholder="请输入租金" v-model="input.rent" clearable>
    </el-input>
    <el-input
      placeholder="请输入是否有宽带"
      v-model="input.hasBroadband"
      clearable
    >
    </el-input>
    <el-input placeholder="请输入入住日期" v-model="input.moveInDate" clearable>
    </el-input>
    <el-input
      placeholder="请输入上次交租日期"
      v-model="input.lastPaymentDate"
      clearable
    >
    </el-input>

    <el-button type="primary" round @click="selectTenant()">查询租客</el-button>

    <el-button type="primary" round @click="addTenant()">新增租客</el-button>

    <el-button type="primary" round @click="deleteTenant()">删除租客</el-button>

    <el-button type="primary" round @click="updateTenant()">修改租客</el-button>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
      <el-table-column prop="floor" label="楼层"> </el-table-column>
      <el-table-column prop="roomNumber" label="房间号"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="gender" label="性别"> </el-table-column>
      <el-table-column prop="idNumber" label="身份证号"> </el-table-column>
      <el-table-column prop="phone" label="电话"> </el-table-column>
      <el-table-column prop="wechatId" label="微信号"> </el-table-column>
      <el-table-column prop="rent" label="租金"> </el-table-column>
      <el-table-column prop="hasBroadband" label="是否有宽带">
      </el-table-column>
      <el-table-column prop="moveInDate" label="入住日期"> </el-table-column>
      <el-table-column prop="lastPaymentDate" label="上次交租日期">
      </el-table-column>
    </el-table>
    <!-- 
    <el-button :plain="true" @click="successful">成功</el-button> -->
  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import {
  selectTenant,
  addTenant,
  deleteTenant,
  updateTenant
} from '@/api/tenants/tenants'

export default {
  data () {
    return {
      tableData: [],
      form: {
        id: '',
        floor: '',
        roomNumber: '',
        name: '',
        gender: '',
        idNumber: '',
        phone: '',
        wechatId: '',
        rent: '',
        hasBroadband: '',
        moveInDate: '',
        lastPaymentDate: ''
      },
      input: {
        id: '',
        floor: '',
        roomNumber: '',
        name: '',
        gender: '',
        idNumber: '',
        phone: '',
        wechatId: '',
        rent: '',
        hasBroadband: '',
        moveInDate: '',
        lastPaymentDate: ''
      }
    }
  },
  created () {
    this.selectTenant()
  },
  methods: {
    success (msg) {
      this.$message({
        message: msg,
        type: msg == '添加成功' ? 'success' : 'error'
      })
    },

    selectTenant () {
      selectTenant(this.input).then(res => {
        this.success('恭喜你，查询成功！')
        this.tableData = res
      })
    },
    addTenant () {
      addTenant(this.input).then(res => {
        console.log(res)
        this.success(res)
        // this.input = res
      })
    },
    deleteTenant () {
      deleteTenant(this.input).then(res => {
        console.log(res)
        this.success(res)
        // this.input = res
      })
    },
    updateTenant () {
      updateTenant(this.input).then(res => {
        console.log(res)
        this.success(res)
        // this.input = res
      })
    }
  }
}
</script>
